<?php
/**
 * @author Nguyen Xuan Hong
 * @copyright 2010
 */
?>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td width="auto" height="30" class="header14" align="center">
		<? echo($title); ?>
	</td>
</tr>
<tr>
	<td height="2" width="auto" style="background-image:url(images/hor-line.png)">
	</td>
</tr>
<tr>
	<td width="auto" class="content" align="center", valign="middle" height="320">
		<link rel="stylesheet" href="http://localhost/wp/styles.css" type="text/css" media="screen" />
		<script type="text/javascript" src="http://localhost/wp/swfobject.js"></script>
		<link rel='stylesheet' id='shadowbox-css-css'  href='http://localhost/wp/shadowbox.css?ver=3.0.3' type='text/css' media='screen' />
		<link rel='stylesheet' id='slideshow-gallery-pro-css'  href='http://localhost/wp/gallery-css.php' type='text/css' media='all' />
		<script type='text/javascript' src='http://localhost/wp/jquery.js?ver=1.6.1'></script>
		<script type='text/javascript' src='http://localhost/wp/gallery-min.js?ver=3.2.1'></script>
		<?php
		$count = count($listpicture);
		?>
		
		<div id="slideshow-wrapper">
			<div id="fullsize">
				<div id="imgprev" class="imgnav" title="Previous Image"></div>
				<div id="imglink"></div>
				<div id="imgnext" class="imgnav" title="Next Image"></div>
				<div id="sgpro_image"></div>
				<div id="information">
				<h5></h5>
				<p></p>
			</div>
		</div>            
		<div id="thumbnails" class="thumbsbot">
			<div id="slideleft" title="Slide Left"></div>
			<div id="slidearea">
				<div id="thumbslider"></div>
			</div>
			<div id="slideright" title="Slide Right"></div>
			<br style="clear:both; visibility:hidden; height:1px;" />
		</div>
		<ul id="sgpro_slideshow" style="display:none;">
			<?php
			for($i = 0; $i < $count; $i++)
			{
				if($i==0)
					$pClsPicture = current($listpicture);
				else
					$pClsPicture = next($listpicture);
				?>
				<li>
					<h5><? echo($pClsPicture->value('title'));?></h5>
					<h4>tall</h4>
					<h5>lightbox</h5>
					<span><? echo($pClsPicture->value('url')); ?></span>                   
					<p><? echo($pClsPicture->value('description'));?></p>
					<a href="<? echo($pClsPicture->value('url')); ?>" rel="shadowbox[sbpost-715];player=img;" title="Slideshow Gallery 2 Example 1">
					<img style="height:60px;" src="<? echo($pClsPicture->value('url')); ?>" alt="slideshow-gallery-2-example-1" />la
					</a>                                
				</li>
				<?php
			}
			?>
		</ul>				
		<script type="text/javascript">
			jQuery.noConflict();
			tid('sgpro_slideshow').style.display = "none";
			tid('slideshow-wrapper').style.display = 'block';
			tid('slideshow-wrapper').style.visibility = 'hidden';	
			jQuery("#fullsize").append('<div id="spinner"><img src="http://localhost/wp/spinner.gif"></div>');
			tid('spinner').style.visibility = 'visible';
			var sgpro_slideshow = new TINY.sgpro_slideshow("sgpro_slideshow");
			
			jQuery(document).ready(function($) 
			{
				window.setTimeout(function() 
				{
				sgpro_slideshow.slidearray = jsSlideshow;
				sgpro_slideshow.auto = 1;	
				sgpro_slideshow.nolink = 0;
				sgpro_slideshow.nolinkpage = 0;	
				sgpro_slideshow.pagelink="self";
				sgpro_slideshow.speed = 8;
				sgpro_slideshow.imgSpeed = 50;
				sgpro_slideshow.navOpacity = 25;
				sgpro_slideshow.navHover = 70;
				sgpro_slideshow.letterbox = "#FFF";
				sgpro_slideshow.info = "information";
				sgpro_slideshow.infoShow = "S";
				sgpro_slideshow.infoSpeed = 7;
				sgpro_slideshow.left = "slideleft";
				sgpro_slideshow.wrap = "slideshow-wrapper";
				sgpro_slideshow.right = "slideright";
				sgpro_slideshow.link = "linkhover";
				sgpro_slideshow.gallery = "post-312";
				sgpro_slideshow.thumbs = "thumbslider";
				sgpro_slideshow.thumbOpacity = 70;
				sgpro_slideshow.thumbHeight = 75;
				//		sgpro_slideshow.scrollSpeed = 7;
				sgpro_slideshow.scrollSpeed = 7;
				sgpro_slideshow.spacing = 5;
				sgpro_slideshow.active = "#000000";
				sgpro_slideshow.imagesbox = "shadowbox";	
				jQuery("#spinner").remove();
				sgpro_slideshow.init("sgpro_slideshow","sgpro_image","imgprev","imgnext","imglink");
				}, 1000);
				tid('slideshow-wrapper').style.visibility = 'visible';
			});
		</script>
		<div>
			<div class="toggle">
				<br />		
				<script type="text/javascript">
					var jsSlideshow = new Array();
				</script>
			</div>
		</div>
		<div id="cameron2">
		</div> <!--#cameron -->
		<script type='text/javascript' src='http://localhost/wp/fb5230720420610a6d20e38efb19d3af.js?ver=3.0.3'></script>
		<script type="text/javascript">
			var shadowbox_conf = 
			{
				autoDimensions: false,
				animateFade: true,
				animate: true,
				animSequence: "sync",
				autoplayMovies: true,
				continuous: false,
				counterLimit: 10,
				counterType: "default",
				displayCounter: true,
				displayNav: true,
				enableKeys: true,
				flashBgColor: "#000000",
				flashParams: {bgcolor:"#000000", allowFullScreen:true},
				flashVars: {},
				flashVersion: "9.0.0",
				handleOversize: "resize",
				handleUnsupported: "link",
				initialHeight: 160,
				initialWidth: 320,
				modal: true,
				overlayColor: "#000",
				showMovieControls: true,
				showOverlay: true,
				skipSetup: false,
				slideshowDelay: 0,
				useSizzle: false,
				viewportPadding: 20
			};
			Shadowbox.init(shadowbox_conf);
		</script>
	</td>
</tr>
</table>